<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>中空领航 - 营地</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background-color: #1E3A5F; /* 深蓝色背景 */
            color: #fff;
            line-height: 1.5;
            height: 100vh;
            overflow-x: hidden;
            position: relative;
        }
        
        /* 城市建筑背景 */
        .city-background {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
            opacity: 0.5;
            background-image: url('https://via.placeholder.com/375x812/0B3D91/FFFFFF?text=');
            background-size: cover;
            background-position: center;
        }
        
        /* 主内容区域 */
        .main-content {
            position: relative;
            z-index: 2;
            padding: 20px 15px;
            height: calc(100% - 60px); /* 减去底部导航高度 */
            display: flex;
            flex-direction: column;
        }
        
        /* 顶部营地信息 */
        .camp-info {
            text-align: center;
            font-size: 16px;
            color: #fff;
            margin-bottom: 20px;
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        
        /* 状态卡片 */
        .status-cards {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
        }
        
        .status-card {
            background: rgba(11, 61, 145, 0.6);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 15px;
            width: 48%;
            display: flex;
            align-items: center;
        }
        
        .coin-icon {
            width: 40px;
            height: 40px;
            background: #FFD700;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
        }
        
        .coin-info {
            flex: 1;
        }
        
        .coin-label {
            font-size: 14px;
            margin-bottom: 5px;
        }
        
        .coin-value {
            font-size: 20px;
            font-weight: bold;
        }
        
        /* 城市建筑区域 */
        .city-buildings {
            flex: 1;
            background-image: url('https://via.placeholder.com/375x400/0B3D91/FFFFFF?text=营地建筑');
            background-size: cover;
            background-position: center;
            position: relative;
            margin-bottom: 20px;
            border-radius: 15px;
            overflow: hidden;
        }
        
        /* 充能按钮区域 */
        .charge-button {
            position: relative;
            background: rgba(74, 144, 226, 0.8);
            border-radius: 30px;
            text-align: center;
            padding: 15px 20px;
            margin: 0 auto 20px;
            width: 80%;
            font-size: 18px;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }
        
        .charge-progress {
            width: 100%;
            height: 8px;
            background: rgba(255,255,255,0.3);
            border-radius: 4px;
            margin-top: 10px;
            overflow: hidden;
        }
        
        .charge-progress-bar {
            height: 100%;
            background: #FFD700;
            width: 35%;
        }
        
        /* 等级信息 */
        .level-info {
            text-align: center;
            margin-bottom: 20px;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
        }
        
        /* 游戏数据卡片 */
        .game-data-cards {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        
        .game-data-card {
            background: rgba(11, 61, 145, 0.6);
            border-radius: 15px;
            padding: 15px;
            width: 48%;
            position: relative;
            margin-bottom: 15px;
        }
        
        .data-badge {
            position: absolute;
            top: 0;
            right: 0;
            background: #4A90E2;
            color: white;
            font-size: 12px;
            padding: 3px 10px;
            border-radius: 0 15px;
        }
        
        .data-label {
            font-size: 14px;
            margin-bottom: 5px;
        }
        
        .data-value {
            font-size: 24px;
            font-weight: bold;
        }
        
        .data-unit {
            font-size: 12px;
            margin-left: 3px;
        }
        
        /* 游戏 WebView */
        .game-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            background-color: #fff;
            display: none;
        }
        
        .game-webview {
            width: 100%;
            height: 100%;
            border: none;
        }
        
        .close-game {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 30px;
            height: 30px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 20px;
            z-index: 1001;
            cursor: pointer;
        }
        
        /* 红包弹窗 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .modal-container {
            width: 80%;
            max-width: 300px;
            background: linear-gradient(to bottom, #0B3D91, #4A90E2);
            border-radius: 20px;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30px 20px;
        }
        
        .modal-header {
            position: relative;
            width: 100%;
            text-align: center;
            margin-bottom: 20px;
        }
        
        .modal-icon {
            position: absolute;
            width: 40px;
            height: 40px;
            background: #FFD700;
            border-radius: 50%;
            left: 20px;
            top: 0;
        }
        
        .modal-star {
            position: absolute;
            color: #FFD700;
            font-size: 20px;
            right: 20px;
            top: 10px;
        }
        
        .modal-title {
            font-size: 18px;
            font-weight: bold;
            background: #FFF3CD;
            color: #0B3D91;
            padding: 10px 20px;
            border-radius: 20px;
            display: inline-block;
        }
        
        .modal-amount {
            font-size: 60px;
            font-weight: bold;
            margin: 20px 0;
        }
        
        .modal-unit {
            font-size: 24px;
            margin-left: 5px;
        }
        
        .modal-button {
            background: #FFF3CD;
            color: #0B3D91;
            padding: 12px 50px;
            border-radius: 25px;
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 20px;
        }
        
        .modal-desc {
            font-size: 14px;
            text-align: center;
        }
        
        .close-button {
            position: absolute;
            bottom: -60px;
            width: 40px;
            height: 40px;
            background: #FFF;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
            font-size: 24px;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background-color: #0B1A30;
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            z-index: 999;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 20%;
        }
        
        .nav-item .icon {
            font-size: 22px;
            margin-bottom: 3px;
            color: #999;
        }
        
        .nav-item .label {
            font-size: 12px;
            color: #999;
        }
        
        .nav-item.active .icon,
        .nav-item.active .label {
            color: #4A90E2;
        }
        
        /* 中间凸起的导航项 */
        .nav-item.featured {
            transform: translateY(-10px);
        }
        
        .nav-item.featured .icon {
            background-color: #0B3D91;
            color: white;
            width: 44px;
            height: 44px;
            border-radius: 22px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 2px;
            font-size: 26px;
            box-shadow: 0 4px 8px rgba(11, 61, 145, 0.3);
        }
        
        .nav-item.featured .label {
            font-weight: bold;
            color: #4A90E2;
        }
        
        /* 图标字体 (使用Material Icons) */
        @font-face {
            font-family: 'Material Icons';
            font-style: normal;
            font-weight: 400;
            src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
        }
        
        .material-icons {
            font-family: 'Material Icons';
            font-weight: normal;
            font-style: normal;
            font-size: 24px;
            line-height: 1;
            letter-spacing: normal;
            text-transform: none;
            display: inline-block;
            white-space: nowrap;
            word-wrap: normal;
            direction: ltr;
            -webkit-font-feature-settings: 'liga';
            -webkit-font-smoothing: antialiased;
        }
    </style>
</head>
<body>
    <!-- 城市建筑背景 -->
    <div class="city-background"></div>
    
    <!-- 主内容区域 -->
    <div class="main-content">
        <!-- 顶部营地信息 -->
        <div class="camp-info">
            当前电量等级: Lv.5 (共有1839427人)
        </div>
        
        <!-- 状态卡片 -->
        <div class="status-cards">
            <!-- 元宝卡片 -->
            <div class="status-card">
                <div class="coin-icon">
                <span class="material-icons">monetization_on</span>
            </div>
                <div class="coin-info">
                    <div class="coin-label">元宝</div>
                    <div class="coin-value">2240.00</div>
        </div>
    </div>
    
            <!-- 电能卡片 -->
            <div class="status-card">
                <div class="coin-icon">
                    <span class="material-icons">stars</span>
        </div>
                <div class="coin-info">
                    <div class="coin-label">电能</div>
                    <div class="coin-value">132.96</div>
                    </div>
                </div>
            </div>
            
        <!-- 城市建筑区域 -->
        <div class="city-buildings">
            <!-- 这里可以放置城市建筑的图片或互动元素 -->
            </div>
            
        <!-- 充能按钮区域 -->
        <div class="charge-button" id="chargeButton">
            营地充能
            <div class="charge-progress">
                <div class="charge-progress-bar"></div>
                    </div>
            </div>
            
        <!-- 等级信息 -->
        <div class="level-info">
            下一等级需要: 200电能 (当前进度: 132.96/200)
    </div>
    
        <!-- 游戏数据卡片 -->
        <div class="game-data-cards">
            <!-- 兑换券卡片 -->
            <div class="game-data-card">
                <div class="data-badge">股权</div>
                <div class="data-label">兑换券</div>
                <div class="data-value">30<span class="data-unit">%</span></div>
        </div>
        
            <!-- 广告收益卡片 -->
            <div class="game-data-card">
                <div class="data-label">广告收益</div>
                <div class="data-value">0.0000002<span class="data-unit">%</span></div>
        </div>
        
            <!-- 提现比例卡片 -->
            <div class="game-data-card">
                <div class="data-label">提现比例</div>
                <div class="data-value">10000<span class="data-unit">元宝=1元</span></div>
        </div>
        
            <!-- 充值比例卡片 -->
            <div class="game-data-card">
                <div class="data-badge">会员专享</div>
                <div class="data-label">充值比例</div>
                <div class="data-value">10万=0.002<span class="data-unit">%</span></div>
            </div>
        </div>
    </div>
    
    <!-- 充能完成弹窗 -->
    <div class="modal" id="chargeModal">
        <div class="modal-container">
            <div class="modal-header">
                <div class="modal-icon"></div>
                <div class="modal-title">营地充能完成</div>
                <div class="modal-star">✨</div>
        </div>
        
            <div class="modal-amount">
                +50<span class="modal-unit">电能</span>
        </div>
        
            <div class="modal-button">
                领取奖励
        </div>
        
            <div class="modal-desc">
                恭喜您完成营地充能，获得电能奖励！
    </div>
    
            <div class="close-button" id="closeModal">×</div>
        </div>
        </div>
        
    <!-- 游戏 WebView 容器 -->
    <div class="game-container" id="gameContainer">
        <div class="close-game" id="closeGame">×</div>
        <iframe class="game-webview" id="gameWebview" src="" frameborder="0" sandbox="allow-scripts allow-same-origin"></iframe>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item">
            <div class="icon">
                <span class="material-icons">home</span>
            </div>
            <div class="label">首页</div>
        </div>
        <div class="nav-item">
            <div class="icon">
                <span class="material-icons">flight</span>
            </div>
            <div class="label">当股东</div>
        </div>
        <div class="nav-item featured active">
            <div class="icon">
                <span class="material-icons">landscape</span>
            </div>
            <div class="label">建营地</div>
        </div>
        <div class="nav-item">
            <div class="icon">
                <span class="material-icons">videocam</span>
            </div>
            <div class="label">视频</div>
        </div>
        <div class="nav-item">
            <div class="icon">
                <span class="material-icons">person</span>
            </div>
            <div class="label">我的</div>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 弹窗关闭功能
            const chargeModal = document.getElementById('chargeModal');
            const closeModal = document.getElementById('closeModal');
            
            // 显示初始弹窗
            setTimeout(function() {
                chargeModal.style.display = 'flex';
            }, 1000);
            
            closeModal.addEventListener('click', function() {
                chargeModal.style.display = 'none';
            });
            
            // 领取按钮点击事件
            const claimButton = document.querySelector('.modal-button');
            claimButton.addEventListener('click', function() {
                chargeModal.style.display = 'none';
            
                // 更新电能显示
                const sugarValue = document.querySelector('.status-cards .status-card:nth-child(2) .coin-value');
                sugarValue.textContent = '182.96';
                
                // 更新等级进度
                const levelInfo = document.querySelector('.level-info');
                levelInfo.textContent = '下一等级需要: 200电能 (当前进度: 182.96/200)';
            });
            
            // 充能按钮功能 - 打开游戏
            const chargeButton = document.getElementById('chargeButton');
            const gameContainer = document.getElementById('gameContainer');
            const gameWebview = document.getElementById('gameWebview');
            const closeGame = document.getElementById('closeGame');
                
            // 点击充能按钮打开游戏
            chargeButton.addEventListener('click', function() {
                // 设置游戏URL
                gameWebview.src = 'https://woodgame.top/29/';
                gameContainer.style.display = 'block';
                
                // 监听iframe加载完成事件
                gameWebview.onload = function() {
                    // 尝试拦截iframe内的链接点击
                    try {
                        const iframeDocument = gameWebview.contentDocument || gameWebview.contentWindow.document;
                        iframeDocument.addEventListener('click', function(e) {
                            // 如果是链接点击，则阻止默认行为
                            if (e.target.tagName === 'A') {
                                e.preventDefault();
                                return false;
                    }
                        });
                    } catch (e) {
                        console.log('无法访问iframe内容，可能是由于同源策略限制');
                    }
                };
            });
            
            // 关闭游戏
            closeGame.addEventListener('click', function() {
                gameContainer.style.display = 'none';
                gameWebview.src = '';
                
                // 模拟充能完成效果
                const progressBar = document.querySelector('.charge-progress-bar');
                progressBar.style.width = '100%';
                
                setTimeout(function() {
                    progressBar.style.width = '35%';
                    
                    // 显示奖励弹窗
                    chargeModal.style.display = 'flex';
                }, 1000);
                });
            
            // 底部导航切换
            const navItems = document.querySelectorAll('.nav-item');
            
            navItems.forEach((item, index) => {
                item.addEventListener('click', function() {
                    navItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 页面跳转
                    const pages = ['index.html', 'airplane.html', 'camp.html', 'video.html', 'my.html'];
                    if (pages[index] && window.location.pathname.split('/').pop() !== pages[index]) {
                        window.location.href = pages[index];
                    }
                });
            });
            
            // 初始化引导系统
            setTimeout(() => {
                // 营地页面引导步骤配置
                const campGuideSteps = [
                    {
                        target: '.status-cards',
                        title: '资源状态',
                        content: '这里显示您当前的元宝和电能资源，是营地建设的基础。',
                        position: 'bottom'
                    },
                    {
                        target: '.city-buildings',
                        title: '营地建筑',
                        content: '这是您的营地建筑区域，随着等级提升会不断发展壮大。',
                        position: 'bottom'
                    },
                    {
                        target: '#chargeButton',
                        title: '营地充能',
                        content: '点击这里可以进行营地充能，通过小游戏获取电能奖励。',
                        position: 'top'
                    },
                    {
                        target: '.game-data-cards',
                        title: '游戏数据',
                        content: '这里展示您的游戏数据，包括兑换券、广告收益和提现比例等。',
                        position: 'top'
                    },
                    {
                        target: '.modal-button',
                        title: '领取奖励',
                        content: '完成充能后，点击这里领取您的电能奖励。',
                        position: 'bottom'
                    }
                ];
            
                // 如果引导系统已加载，则初始化
                if (typeof guideSystem !== 'undefined') {
                    guideSystem.init('camp', campGuideSteps);
                }
            }, 1500); // 延迟1.5秒，确保初始弹窗显示后再显示引导
        });
    </script>
    
    <!-- 引入引导系统脚本 -->
    <script src="guide.js"></script>
</body>
</html>